import React from 'react'
import { Spin } from 'antd'
import Condition from 'components/condition'
import {messages} from "share/common";
const { If, Else } = Condition;

import NullCard from "containers/dashboard/dashboard-component/null-card"
import CardTitle from "containers/dashboard/dashboard-component/card-title"
import expenseService from 'containers/my-account/expense.service'
import dashboardService from "containers/dashboard/dashboard.service";

class BusinessCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      businessCardEnabled: null,
      businessCard: {},
      businessCardTotalAmount: 0
    }
  }

  componentWillMount() {
    this.getBusinessCardStatus()
  }

  getBusinessCardStatus = () => {
    expenseService.getBusinessCardStatus().then(res => {
      !!res.data.rows && this.getBusinessCardData();
      this.setState({
        businessCardEnabled: res.data.rows,
      })
    });
  };

  getBusinessCardData = () => {
    this.setState({load: true});
    dashboardService.getBusinessCard().then(res => {
      let businessCardTotalAmount = res.data.businessCardDetail.detail.reduce((pre, now) => now.totalAmount + pre, 0);
      this.setState({
        businessCard: res.data.businessCardDetail,
        businessCardTotalAmount,
        load: false
      })
    })
  };

  render() {
    const {load, businessCard, businessCardEnabled, businessCardTotalAmount} = this.state;
    const {removeModule} = this.props;
    return (
      <Spin spinning={load}>
        <CardTitle  cardKey={"8"}
                    title={messages('dashboard.key40'/*商务卡*/)}
                    removeModule={(key) => removeModule(key)}
                    reloadModule={this.getBusinessCardStatus}/>
        <div className="card-content">
          <Condition>
            <If value={businessCardEnabled}>
              <Condition>
                <If value={businessCard.totalexpenseNumber> 0}>
                  <div className="amount-card">
                    <div className="amount-title">
                      {businessCard.totalexpenseNumber}<span>{messages('dashboard.key41'/*笔待处理商务卡消费*/)}</span>
                    </div>
                    <div className="amount-detail"> {messages('common.total.amount')/*总金额*/}:{this.filterMoney(businessCardTotalAmount)}，{messages('dashboard.key165')/*记得赶紧处理哦*/}~</div>
                  </div>
                </If>
                <Else>
                  <NullCard imgType={"businessCard"} message={messages('dashboard.key169')/*太棒啦！没有待处理的消费！*/}/>
                </Else>
              </Condition>
            </If>
            <Else>
              <NullCard imgType={"unOpened"} message={messages('dashboard.key168')/*没有开启此功能*/}/>
            </Else>
          </Condition>
        </div>
      </Spin>
    )
  }
}

BusinessCard.propTypes = {
  removeModule: React.PropTypes.func.isRequired
};

BusinessCard.defaultProps={
};

export default BusinessCard
